<template>
    <div>
<!--      <center>
        <h1>这一步由站点业务员（收货员）操作</h1>
        <p>先是收货员与司机对接收货,验收成功就点收货员验收，填入货运单编号和是否验收成功，填否就要再去填入一个差错信息，可以在当前页面点差错信息，
        也可以去货物验收管理的差错信息填入
        </p>
      </center>-->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">到货管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>到货回执管理</el-breadcrumb-item>
          <el-breadcrumb-item>货运回执</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--form表单搜索框-->
      <!-- 搜索筛选 -->
        <div>
<!--          <div>
            <el-input placeholder="请输入内容" v-model="input1" style="width: 300px;text-align: left">
              <template slot="prepend">司机姓名：</template>
            </el-input>
          </div>-->
          <el-form :inline="true"  class="driverReceipt-search" style="text-align: left">
            <el-form-item >
              <el-input size="small"  placeholder="司机姓名"></el-input>
              <template slot="prepend">司机姓名:</template>
            </el-form-item>

            <el-form-item>
              <el-input size="small"  placeholder="客户手机号"></el-input>
              <template slot="prepend">客户手机号:</template>
            </el-form-item>
            <el-form-item>
              <el-input size="small"  placeholder="货运单编号"></el-input>
              <template slot="prepend">货运单编号:</template>
            </el-form-item>

            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div>
          <!--功能按钮-->
          <el-row :inline="true" style="text-align: left" >
            <el-button type="success" @click="addDriverReceiptFormVisible = true">增加</el-button>
<!--            <el-button type="primary" plain>接货员验收</el-button>
            <el-button type="primary" plain>短信通知客户提货</el-button>
            <el-button type="primary" plain>收货客户验收</el-button>
            <el-button type="primary" plain>短信通知客户到货</el-button>
            <el-button type="info" plain>差错信息填写</el-button>
            <el-button type="danger" plain>收款</el-button>-->
          </el-row>
        </div>

<!--      &lt;!&ndash;增加司机回执单弹出框&ndash;&gt;
        <div>
          <el-dialog title="增加货运回执单" :visible.sync="addDriverReceiptFormVisible">
            <el-form :model="adddriverreceiptform">
              <el-form-item label="货运单编号" :label-width="formLabelWidth">
                <el-input v-model="adddriverreceiptform.fid" autocomplete="off" @blur="isSalesmanAccept()"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
              <el-button @click="addDriverReceiptFormVisible = false;addDriverReceiptForm={}">取 消</el-button>
              <el-button type="primary" @click="addDriverReceipt()">确 定</el-button>
            </div>
          </el-dialog>
        </div>-->

      <!--司机回执单弹出框-->
      <div>
        <el-dialog title="新增司机回执单" :visible.sync="addDriverReceiptFormVisible">
          <el-form :model="adddriverreceiptform" :inline="true" label-width="80px" ref="adddriverreceiptform" :rules="rules">
            <el-form-item label="货运单编号" :label-width="formLabelWidth" prop="fid">
              <el-input v-model="adddriverreceiptform.fid" autocomplete="off" @blur="isSalesmanAccept()"></el-input>
            </el-form-item>


          <el-form-item>
            <el-button @click="addDriverReceiptFormVisible = false;resetForm('adddriverreceiptform')">取 消</el-button>
            <el-button type="primary" @click="addDriverReceipt('adddriverreceiptform')">确 定</el-button>
          </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!--司机回执列表-->
      <el-table :data="pageInfo.list" style="width: 100%">
<!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column fixed prop="id" label="货运回执单号" width="120"></el-table-column>
        <el-table-column prop="shipping_time" label="起运时间" width="120"></el-table-column>
        <el-table-column prop="arrive_time" label="到货时间" width="120"></el-table-column>
        <el-table-column prop="fare" label="总运费" width="180"></el-table-column>
        <el-table-column prop="insurancefare" label="保险费" width="120"></el-table-column>
        <el-table-column prop="consignee_name" label="收获联系人" width="120"></el-table-column>
        <el-table-column prop="consignee_number" label="联系人手机" width="120"></el-table-column>
        <el-table-column prop="driver_name" label="司机姓名" width="120"></el-table-column>
        <el-table-column prop="isAcount" label="是否结算" width="120">
          <template slot-scope="scope">
            {{scope.row.isAcount?"结算":"未结算"}}
          </template>
        </el-table-column>
        <el-table-column prop="ispass" label="收货验收" width="120">
          <template slot-scope="scope">
            {{scope.row.ispass?"通过":"未通过"}}
          </template>
        </el-table-column>
        <el-table-column prop="consignee_acceptance" label="客户验收" width="120">
          <template slot-scope="scope">
            {{scope.row.consignee_acceptance?"通过":"未通过"}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" >
          <template slot-scope="scope" >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--修改司机回执单弹出框-->
      <div>
        <el-dialog title="修改司机回执单" :visible.sync="updateDriverReceiptFormVisible">
          <el-form :model="updatedriverreceiptform" :inline="true" label-width="80px">
            <el-form-item label="收货人姓名" :label-width="formLabelWidth">
              <el-input v-model="updatedriverreceiptform.consignee_name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="收货人电话" :label-width="formLabelWidth">
              <el-input v-model="updatedriverreceiptform.consignee_number" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer" >
            <el-button @click="updateDriverReceiptFormVisible = false;updateDriverReceiptForm={}">取 消</el-button>
            <el-button type="primary" @click="updateDriverReceipt()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
<!--      分页-->
      <div class="block">
        <el-pagination style="margin-left: 280px"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum" :page-sizes="[5, 10]" :page-size="pageInfo.pageSize"
             layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
      </div>
    </div>
</template>

<script>
export default {
  name: "Driver_receipt",
  methods: {
    /*表格的修改和删除方法*/
    handleEdit(index, row) {
      console.log(index, row);
      this.updateDriverReceiptFormVisible=true;
      this.updatedriverreceiptform={...row}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('确定要删除该条货物回执记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        //发送axios
        this.axios.delete("http://localhost:8080/salesman/deleteDriverReceipt/" + row.id).then(res =>{
          if(res.data.code == 2002){
            this.getList();
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*分页的两个方法*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    //增加货运回执单的方法
    addDriverReceipt(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("http://localhost:8080/salesman/addDriverReceipt/" + this.adddriverreceiptform.fid).then(res =>{
            this.$message(res.data.msg);
            //console.log(res.data);
            //console.log(res);
            this.adddriverreceiptform={};
            this.addDriverReceiptFormVisible = false
            this.getList();


          })
        } else {
          this.$message("必须填货运单号");
          return false;
        }
      });
      //发送axios

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getList() {
      this.axios.get("http://localhost:8080/salesman/driverBillsFindAll/" + this.currentPage + "/" + this.pageSize).then(res => {
        //console.log(res.data.data.list);
        console.log(res.data.data);
        this.pageInfo = res.data.data;

      })
    },
    isSalesmanAccept(){
      this.axios.get("http://localhost:8080/salesman/isSalesmanAccept/" + this.adddriverreceiptform.fid).then(res => {
        this.$message(res.data.msg);
        if (res.data.code != 2001){
          this.adddriverreceiptform.fid='';
        }
      })
    },
    updateDriverReceipt(){
      this.axios.put("http://localhost:8080/salesman/updateDriverReceipt",this.updatedriverreceiptform).then(res=>{
        this.$message(res.data.msg);
        this.updatedriverreceiptform={};
        this.updateDriverReceiptFormVisible = false
        this.getList();
      })
    }
  },

  data() {
    return {
      rules: {
        fid: [
          {required: true, message: '这是必填选项', trigger: 'blur'},

        ],
      },
      activeName: 'first',
      //新增弹出框参数
      addDriverReceiptFormVisible:false,
      adddriverreceiptform: {
        id:'',
        cid: '',
        fid:'',
        shipping_time:'',
        fare:'',
        insurancefare:'',
        consignee_name:'',
        consignee_number:'',
        consignee_acceptance:'',
        driver_name:'',
        ispass:'',
        arrivetime:'',
        pay:'',
        isSettle:''
      },
      //修改弹出框参数
      updateDriverReceiptFormVisible:false,
      updatedriverreceiptform: {
        cid: '',
        fid:'',
        shipping_time:'',
        fare:'',
        insurancefare:'',
        consignee_name:'',
        consignee_number:'',
        consignee_acceptance:'',
        driver_name:'',
        ispass:'',
        arrive_time:'',
        pay:'',
        isSettle:''
      },
      formLabelWidth: '120px',
      //司机回执单数据
      //当前页码
      currentPage:1,
      //每页显示的条数
      pageSize:2,
      //分页插件返回的json对象
      pageInfo:{},
      search: '',
      /*currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      input1:''*/

    };
  },
  created() {
    //发送axios
    this.getList();
  },


}
</script>

<style scoped>

</style>